<template>
  <Top-Page>
    <cu-custom bgColor="bg-gradual-white" :isBack="true">
      <template #backText></template>
      <template #content>聊天信息</template>
    </cu-custom>
    <view>
      <view class="bg-white">
        <view class="user-list im-flex im-justify-content-start im-align-items-center im-a im-wrap">
          <view class="user-info mt-20" v-for="(item, index) in userList" :key="index" align="center">
            <image
              :class="[appSetting.circleAvatar ? 'round' : 'radius', 'user-avatar']"
              :src="`${item.userInfo.avatar}?imageView2/1/w/100/h/100/q/50`"
              @tap="openChatDetail(item.userInfo)"
            ></image>
            <view class="text-center user-name text-overflow">
              {{ item.userInfo.displayName }}
            </view>
          </view>
          <view class="user-info mt-20" v-if="isAuth || is_group == 0 || contact.setting.invite">
            <view
              :class="[appSetting.circleAvatar ? 'round' : 'radius', 'user-opt', 'radius-8']"
              style="margin: auto"
              @tap="editUser(2)"
            >
              <view class="icon cuIcon-add f-24"></view>
            </view>
            <view class="f-11 mt-5">添加成员</view>
          </view>
          <view class="user-info mt-20" v-if="isAuth">
            <view
              :class="[appSetting.circleAvatar ? 'round' : 'radius', 'user-opt', 'radius-8']"
              style="margin: auto"
              @tap="manageUser()"
            >
              <view class="icon cuIcon-move f-24"></view>
            </view>
            <view class="f-11 mt-5">移除成员</view>
          </view>
        </view>
        <navigator v-if="is_group == 1" class="mt" :url="`/pages/message/group/groupUser?group_id=${contact_id}`">
          <view class="text-center pb-15 pt-15 im-flex im-justify-content-center im-align-items-center">
            <text class="gui-list-title-text gui-list-one-line gui-primary-color">查看全部群成员</text>
            <text class="gui-list-title-desc gui-color-gray">{{ allUser.length }}人</text>
            <text class="cuIcon-right"></text>
          </view>
        </navigator>
      </view>

      <view class="cu-list menu mt bg-white">
        <view class="cu-item" @click="toSMR">
          <view class="content padding-tb-sm">
            <view>查找聊天记录</view>
          </view>
          <view class="action">
            <view class="text-grey"><text class="cuIcon-right"></text></view>
          </view>
        </view>
      </view>

      <view class="cu-list menu mt bg-white" v-if="is_group == 1">
        <view class="cu-item" @click="open('popup')">
          <view class="content padding-tb-sm">
            <view>群聊名称</view>
          </view>
          <view class="action">
            <view class="text-grey">
              {{ contact.displayName }}
              <text class="cuIcon-right"></text>
            </view>
          </view>
        </view>
        <view class="cu-item" @click="openQr" v-if="contact.setting.invite">
          <view class="content padding-tb-sm">
            <view>群二维码</view>
          </view>
          <view class="action">
            <view class="text-grey">
              <text class="cuIcon-qr_code f-18"></text>
              <text class="cuIcon-right"></text>
            </view>
          </view>
        </view>
        <view class="cu-item" @tap="openModel('notice')">
          <view class="content padding-tb-sm">
            <view>群公告</view>
          </view>
          <view class="action" style="width: 80%">
            <view class="text-grey im-flex im-justify-content-end" style="align-items: center">
              <view class="text-overflow notice-line">
                {{ contact.notice ?? "暂无公告" }}
              </view>
              <text class="cuIcon-right"></text>
            </view>
          </view>
        </view>
        <view class="cu-item" v-if="isAuth" @tap="openModel('manage')">
          <view class="content padding-tb-sm">
            <view>群管理</view>
          </view>
          <view class="action">
            <view class="text-grey"><text class="cuIcon-right"></text></view>
          </view>
        </view>
        <uni-popup ref="popup" type="dialog">
          <uni-popup-dialog
            mode="input"
            :value="contact.displayName"
            title="修改群名称"
            :duration="2000"
            :before-close="true"
            @close="closePop('popup')"
            @confirm="editGroupName($event, 'popup')"
          ></uni-popup-dialog>
        </uni-popup>
      </view>

      <view class="cu-list menu mt bg-white">
        <view class="cu-item" @click="open('nickname_popup')">
          <view class="content padding-tb-sm">
            <view>我在群内昵称</view>
          </view>
          <view class="action">
            <view class="text-grey">
              {{ contact.group_name || userInfo.realname }}
              <text class="cuIcon-right"></text>
            </view>
          </view>
        </view>

        <uni-popup ref="nickname_popup" type="dialog">
          <uni-popup-dialog
            mode="input"
            :value="contact.group_name || userInfo.realname"
            title="修改群内昵称"
            :duration="2000"
            :before-close="true"
            @close="closePop('nickname_popup')"
            @confirm="editGroupName($event, 'nickname_popup')"
          ></uni-popup-dialog>
        </uni-popup>
      </view>

      <view class="cu-list menu mt bg-white">
        <view class="cu-item">
          <view class="content padding-tb-sm">
            <view>消息免打扰</view>
          </view>
          <view class="action">
            <switch
              class="switch"
              @change="setIsNotice"
              :class="!contact.is_notice ? 'checked' : ''"
              :checked="!contact.is_notice ? true : false"
            ></switch>
          </view>
        </view>
        <view class="cu-item">
          <view class="content padding-tb-sm">
            <view>置顶聊天</view>
          </view>
          <view class="action">
            <switch
              class="switch"
              @change="setIsTop"
              :class="contact.is_top ? 'checked' : ''"
              :checked="contact.is_top ? true : false"
            ></switch>
          </view>
        </view>
      </view>

      <view class="cu-list menu mt bg-white">
        <view class="cu-item" @click="selectChatBGShow = !selectChatBGShow">
          <view class="content padding-tb-sm">
            <view>设置聊天背景</view>
          </view>
          <view class="action">
            <view class="text-grey"><text class="cuIcon-right"></text></view>
          </view>
        </view>
      </view>

      <view class="cu-list menu mt bg-white">
        <view class="cu-item" @click="clearRecord">
          <view class="content padding-tb-sm">
            <view>清空聊天记录</view>
          </view>
          <view class="action">
            <view class="text-grey"><text class="cuIcon-right"></text></view>
          </view>
        </view>
      </view>

      <!-- 			<view class="cu-list menu mt bg-white">
				<view class="cu-item">
					<view class="content padding-tb-sm">
						<view> 查看聊天记录 </view>
					</view>
					<view class="action">
						<view class="text-grey"><text class="cuIcon-right"></text></view>
					</view>
				</view>
			</view> -->

      <view class="cu-list menu mt bg-white" v-if="is_group == 1" @tap="removeGroup">
        <view class="cu-item text-center delete-btn">
          <text class="c-red">{{ isAdmin ? "解散群聊" : "退出群聊" }}</text>
        </view>
      </view>
      <!-- <view class="parting-line-20"></view> -->
      <view class="cu-modal bottom-modal" :class="modelName == 'notice' ? 'show' : ''" @touchmove.stop.prevent>
        <view class="cu-dialog">
          <view class="cu-bar bg-white">
            <view class="action text-gray" @tap="closeModel">取消</view>
            <view class="action text-green" @tap="editNotice">保存</view>
          </view>
          <view class="notice-content">
            <textarea
              class="im-textarea"
              maxlength="-1"
              :disabled="!isAuth"
              v-model="contact.notice"
              @input="textareaAInput"
              placeholder="请输入公告内容..."
            ></textarea>
          </view>
        </view>
      </view>
      <view class="cu-modal bottom-modal" :class="modelName == 'manage' ? 'show' : ''" @touchmove.stop.prevent>
        <view class="cu-dialog">
          <view class="cu-bar bg-white">
            <view class="action text-gray" @tap="closeModel">取消</view>
            <view class="action text-green" @tap="saveManage">保存</view>
          </view>
          <view class="manage-content">
            <view class="cu-list menu mt bg-white">
              <view class="cu-item">
                <view class="content padding-tb-sm">
                  <view>仅群主和群管理员可以管理</view>
                  <view class="text-gray text-sm">启用后，其他成员不能修改群名称，编辑公告等</view>
                </view>
                <view class="action">
                  <switch
                    class="switch"
                    @change="setManage"
                    :class="contact.setting.manage == '1' ? 'checked' : ''"
                    :checked="contact.setting.manage == '1' ? true : false"
                  ></switch>
                </view>
              </view>
              <view class="cu-item">
                <view class="content padding-tb-sm">
                  <view>允许群成员邀请</view>
                  <view class="text-gray text-sm">启用后，其他成员可以邀请其他人加入群聊</view>
                </view>
                <view class="action">
                  <switch
                    class="switch"
                    @change="setInvite"
                    :class="contact.setting.invite == '1' ? 'checked' : ''"
                    :checked="contact.setting.invite == '1' ? true : false"
                  ></switch>
                </view>
              </view>
              <view class="cu-item">
                <view class="content padding-tb-sm">
                  <view>允许添加群成员为好友</view>
                  <view class="text-gray text-sm">启用后，成员可以互相查看资料并添加为好友或发消息</view>
                </view>
                <view class="action">
                  <switch
                    class="switch"
                    @change="setProfile"
                    :class="contact.setting.profile == '1' ? 'checked' : ''"
                    :checked="contact.setting.profile == '1' ? true : false"
                  ></switch>
                </view>
              </view>
              <view class="cu-item">
                <view class="content padding-tb-sm">
                  <view>推荐群聊</view>
                  <view class="text-gray text-sm">启用后，可将本群推荐到“趣群”</view>
                </view>
                <view class="action">
                  <switch
                    class="switch"
                    @change="setRecommend"
                    :class="contact.setting?.recommend?.open == '1' ? 'checked' : ''"
                    :checked="contact.setting?.recommend?.open == '1' ? true : false"
                  ></switch>
                </view>
              </view>
              <uni-section title="群标签" type="line" @click="labelShow = !labelShow">
                <template v-slot:right>
                  <text class="cuIcon-right"></text>
                </template>
                <view class="label-wrap">
                  <view class="label" v-for="item in contact.setting.recommend?.label" :key="item">
                    {{ item }}
                  </view>
                </view>
              </uni-section>

              <uni-section title="群定位" type="line" @click="onLng">
                <template v-slot:right>
                  <text class="cuIcon-right"></text>
                </template>
                <text class="label-wrap">
                  {{ contact.setting.recommend?.name }}
                </text>
              </uni-section>

              <uni-section title="群聊禁言" type="line">
                <radio-group class="block" @change="setSpeak">
                  <view class="cu-form-group" v-for="item in radioList">
                    <view class="title">{{ item.label }}</view>
                    <radio
                      :class="contact.setting.nospeak == item.value ? 'checked' : ''"
                      :checked="contact.setting.nospeak == item.value ? true : false"
                      :value="item.value"
                    ></radio>
                  </view>
                </radio-group>
              </uni-section>
            </view>
          </view>
        </view>
      </view>
    </view>
    <Popup v-model:show="selectChatBGShow" position="bottom" closeable round class="select-chat-bg-wrap">
      <view class="select-chat-bg__title">设置聊天背景</view>

      <view class="cu-list menu mt bg-white">
        <view class="cu-item" @click="setChatBG('')">
          <view class="content padding-tb-sm">
            <view>设置成默认</view>
          </view>
          <view class="action">
            <view class="text-grey"><text class="cuIcon-right"></text></view>
          </view>
        </view>
      </view>

      <view class="cu-list menu mt bg-white cancel-border">
        <view class="cu-item" @click="setChatBG('select')">
          <view class="content padding-tb-sm">
            <view>选择聊天背景</view>
          </view>
          <view class="action">
            <view class="text-grey"><text class="cuIcon-right"></text></view>
          </view>
        </view>
      </view>
    </Popup>

    <!-- 群标签 -->
    <Popups v-model:show="labelShow" position="bottom" round closeable class="interests-popup-wrap">
      <view class="title">群标签</view>

      <view class="select-content">
        <view
          v-for="(item, index) in group_label"
          :class="['label-li', labelON(index) ? 'on' : '']"
          @click="changeLabel(index)"
        >
          {{ item }}
        </view>
      </view>
      <view class="add-label">
        <input
          class="add-item"
          v-for="(item, index) in addLabels"
          :maxlength="4"
          auto-height
          :value="item.value"
          @input="updateInput('addLabels', index, $event)"
          placeholder="去填写"
          placeholder-style="color:#fff"
        />
      </view>

      <view class="add-wrap" @click="addLabel('addLabels')" v-show="addLabels.length < 10">
        <view class="add-fh">+</view>
        <view>追加标签</view>
      </view>

      <view class="btn-wrap">
        <view class="btn-ca btn-cancel" @click="labelShow = false">取消</view>
        <view class="btn-ca btn-affirm" @click="labelConfirm">确认</view>
      </view>
    </Popups>
  </Top-Page>
</template>

<script>
import { useMsgStore } from "@/store/message";
import pinia from "@/store/index";
import Popup from "@/components/Popup/Popup.vue";
import Popups from "@/components/Popups/index.vue";
import { chooseFilesImg, uploadFiles } from "@/utils/fileUtils.js";

const msgStore = useMsgStore(pinia);

import { useloginStore } from "@/store/login";
const userStore = useloginStore(pinia);

export default {
  components: { Popup, Popups },
  data() {
    return {
      userInfo: uni.getStorageSync("userInfo"),
      group_label: uni.getStorageSync("globalConfig").group_label,
      labelListIndex: [],
      addLabels: [],
      labelShow: false,
      appSetting: userStore.appSetting,
      selectChatBGShow: false,
      files: [],
      pageLoading: true,
      contact_id: null, //聊天id,
      is_group: 0,
      modelName: false,
      userList: [], //群成员
      allUser: [],
      chatRecordlist: [
        {
          text: "文本",
          icon: "icon-wenben",
          type: "text",
        },
        {
          text: "图片",
          icon: "icon-zhaopian",
          type: "image",
        },
        {
          text: "文件",
          icon: "icon-wenjian",
          type: "file",
        },
        {
          text: "视频",
          icon: "icon-shipin",
          type: "video",
        },
        {
          text: "项目",
          icon: "icon-xiangmu_2",
          type: "project",
        },
        {
          text: "客户",
          icon: "icon-kehu",
          type: "leads",
        },
      ],
      radioList: [
        {
          label: "关闭",
          value: 0,
        },
        {
          label: "仅管理员可发言",
          value: 1,
        },
        {
          label: "仅群主可发言",
          value: 2,
        },
      ],
      isAuth: false, //判断自己是否时群管理或者群主
      contact: null, //联系人相关信息
      isAdmin: false, //如果为真，自己就是群主
      isManage: false, // 如果为真，自己就是管理
      user_ids: [],
      user: [], //全部群成员
      query: {},
    };
  },
  onShow() {
    this.getUserlist();
  },
  onLoad: function (options) {
    Object.assign(this.query, options);
    this.is_group = options.is_group;
    this.contact_id = options.id;
    let contact = msgStore.getContact(this.contact_id);
    this.contact = contact;
    if (this.is_group == 0) {
      contact.userInfo = {
        id: contact.user_id,
        account: contact.account,
        displayName: contact.displayName,
        avatar: contact.avatar,
      };
      this.allUser.push(contact);
      this.userList.push(contact);
    }

    //反显
    this.group_label.map((item, index) => {
      if (this.contact.setting.recommend?.label.includes(item)) {
        this.labelListIndex.push(index);
      }
    });

    this.contact.setting.recommend?.label.map((item) => {
      if (!this.group_label.includes(item)) {
        this.addLabels.push({
          value: item,
        });
      }
    });
  },
  methods: {
    async onLng() {
      uni.showToast({
        title: "定位中...",
        icon: "none",
      });

      const lng = await this.getOutInfo();

      uni.chooseLocation({
        latitude: lng.latitude,
        longitude: lng.longitude,
        useSecureNetwork: true,
        success: (res) => {
          this.contact.setting.recommend.name = res.name;
          this.contact.setting.recommend.lng = res.longitude;
          this.contact.setting.recommend.lat = res.latitude;
        },
        fail: (err) => {
          console.error(err);
        },
      });
    },
    getOutInfo() {
      return new Promise((resolve, reject) => {
        uni.getLocation({
          type: "gcj02 ",
          success: (res) => {
            resolve(res);
          },
          fail: (err) => {
            reject(res);
          },
        });
      });
    },
    labelON(index) {
      let s = false;
      if (this.labelListIndex.includes(index)) {
        s = true;
      } else {
        s = false;
      }
      return s;
    },
    changeLabel(index) {
      const ind = this.labelListIndex.indexOf(index);
      if (ind == -1) {
        this.labelListIndex.push(index);
      } else {
        this.labelListIndex.splice(ind, 1);
      }
    },
    updateInput(type, index, event) {
      const value = event.detail.value;
      this.$set(this[type], index, { value });
    },
    //追加标签
    addLabel(type) {
      this[type].push({ value: "" });
    },
    labelConfirm() {
      let adds = this.addLabels.map((item) => item.value);

      const notEmptyList = [];
      adds.forEach((v) => {
        if (v.replace(/\s/g, "") != "") {
          notEmptyList.push(v);
        }
      });

      this.group_label.forEach((item, index) => {
        this.labelListIndex.includes(index) && notEmptyList.push(item);
      });

      this.contact.setting.recommend.label = notEmptyList;

      this.labelShow = false;
    },
    toSMR() {
      uni.navigateTo({
        url: `/pages/message/search-message-record?id=${this.contact_id}&is_group=${this.contact.is_group}`,
      });
    },
    //清空聊天记录
    clearRecord() {
      uni.showModal({
        content: `确定删除和${this.contact.realname}的聊天记录吗？`,
        success: (res) => {
          if (res.confirm) {
            console.log("用户点击确定");
            this.msglogclean();
          }
        },
      });
    },
    // 清空聊天记录 API
    msglogclean() {
      uni.showToast({
        title: "清空中...",
        icon: "loading",
        mask: true,
        duration: 999999,
      });

      const data = {
        is_group: this.contact.is_group,
        toContactId: this.contact_id,
      };

      this.$api.msgApi.msglogclean(data).then((res) => {
        uni.hideToast();

        const pages = getCurrentPages();
        const beforePage = pages[pages.length - 2];
        beforePage.$vm.clearRecords(); // 触发上一个页面中的方法

        uni.showToast({
          title: `${res.msg}`,
          icon: "none",
        });
      });
    },
    //设置聊天背景
    setChatBG(type) {
      this.files.length = 0;
      if (type) {
        this.handleChooseFiles(type);
      } else {
        this.chatbgset(type);
      }
    },
    // 处理选择文件
    async handleChooseFiles(type) {
      try {
        this.files = await chooseFilesImg(this.files);
        console.log(this.files, "this.files");
        //设置背景
        this.chatbgset(type);
      } catch (error) {
        console.error("选择文件失败:", error);
      }
    },
    // 处理上传文件
    async handleUploadFiles() {
      try {
        const uploadUrl = this.$api.msgApi.uploadImage; // 替换为你的上传接口地址
        const responses = await uploadFiles(this.files, uploadUrl);
        // console.log('上传成功:', responses);
        return responses;
      } catch (error) {
        // console.error('上传失败:', error);
        return "";
      }
    },
    async chatbgset(type) {
      uni.showToast({
        title: "提交中...",
        icon: "loading",
        mask: true,
        duration: 999999,
      });

      const files = [];

      if (type) {
        const responses = await this.handleUploadFiles();

        responses.forEach((item) => {
          files.push(JSON.parse(item.data).data);
        });

        console.log(files);

        if (!files.length) {
          uni.hideToast();

          uni.showToast({
            title: "问题描述不能为空",
            icon: "none",
          });
          return;
        }
      }

      const data = {
        is_group: this.contact.is_group,
        toContactId: this.contact_id,
        img: type ? files.join(",") : "",
      };

      this.$api.msgApi.chatbgset(data).then((res) => {
        uni.hideToast();

        uni.showToast({
          title: `${res.msg}`,
          icon: "none",
        });

        if (res.code === 0) {
          this.selectChatBGShow = !this.selectChatBGShow;
          this.contact.chat_bg = files.join(",");

          msgStore.updateContacts(this.contact);

          const pages = getCurrentPages();
          const beforePage = pages[pages.length - 2];
          beforePage.$vm.updateContact();
        }
      });
    },
    openModel(model) {
      this.modelName = model;
    },
    closeModel() {
      this.modelName = false;
    },
    saveManage() {
      if (!this.isAuth) return;
      this.$api.msgApi.groupSetting({
        id: this.contact.id,
        setting: this.contact.setting,
      });
      this.modelName = false;
    },
    setManage(e) {
      this.contact.setting.manage = e.detail.value ? "1" : "0";
    },
    setInvite(e) {
      this.contact.setting.invite = e.detail.value ? "1" : "0";
    },
    setProfile(e) {
      this.contact.setting.profile = e.detail.value ? "1" : "0";
    },
    setRecommend(e) {
      this.contact.setting.recommend.open = e.detail.value ? "1" : "0";
    },
    setSpeak(e) {
      this.contact.setting.nospeak = e.detail.value;
    },
    setIsNotice(e) {
      this.contact.is_notice = e.detail.value ? 0 : 1;
      this.$api.msgApi.isNoticeAPI({
        id: this.contact.id,
        is_group: this.contact.is_group,
        is_notice: this.contact.is_notice,
      });
    },
    setIsTop(e) {
      this.contact.is_top = e.detail.value ? 1 : 0;
      this.$api.msgApi.setChatTopAPI({
        id: this.contact.id,
        is_group: this.contact.is_group,
        is_top: this.contact.is_top,
      });
    },
    editNotice() {
      if (!this.isAuth) return;
      this.$api.msgApi.setNotice({
        id: this.contact.id,
        notice: this.contact.notice,
      });
      this.modelName = false;
    },
    open(type) {
      this.$refs[type].open();
    },
    openQr() {
      uni.navigateTo({
        url: "/pages/index/qrcode?group_id=" + this.contact.id,
      });
    },
    editGroupName(e, type) {
      let api = "editGroupName";
      let data = { id: this.contact.id, displayName: e };
      if (type === "nickname_popup") {
        api = "editGroupUserName";
        data = {
          id: this.contact.id,
          group_name: e,
        };
      }
      this.$api.msgApi[api](data).then((res) => {
        type === "popup" ? (this.contact.displayName = e) : (this.contact.group_name = e);
        this.$refs[type].close();
      });
    },
    closePop(type) {
      this.$refs[type].close();
    },
    //移除群聊
    removeGroup() {
      // 如果是群主就解散群聊，否则就退出群聊
      let txt = "退出群聊";
      if (this.isAdmin) txt = "解散群聊";
      const data = { id: this.contact.id };
      uni.showModal({
        title: "确定要" + txt + "吗?",
        success: (e) => {
          if (e.confirm) {
            if (this.isAdmin) {
              this.$api.msgApi.removeGroup(data).then((res) => {
                msgStore.deleteContacts(data);
                // 删除之后返回首页
                uni.reLaunch({
                  url: "/pages/index/index",
                });
              });
            } else {
              this.$api.msgApi
                .removeUser({
                  id: this.contact.id,
                  user_id: this.userInfo.user_id,
                })
                .then((res) => {
                  msgStore.deleteContacts(data);
                  // 删除之后返回首页
                  uni.reLaunch({
                    url: "/pages/index/index",
                  });
                });
            }
          }
        },
      });
    },
    // 添加群成员
    editUser(type) {
      this.user_ids = this.allUser.map((item) => item.user_id);
      if (this.contact.is_group == 0) {
        type = 1;
      }
      uni.navigateTo({
        url: "/pages/index/userSelection?type=" + type + "&contact_id=" + this.contact.id,
      });
    },
    // 管理群成员
    manageUser() {
      uni.navigateTo({
        url: "/pages/message/group/groupUser?group_id=" + this.contact.id,
      });
    },
    // 跳转到聊天记录
    goChatRecord(type) {
      uni.navigateTo({
        url:
          "/package/message/pages/chatRecord/chatRecord?type=" +
          type +
          "&toContactId=" +
          this.contact_id +
          "&is_group=1",
      });
    },
    // 获取群成员列表
    getUserlist() {
      if (this.is_group == 0) return;
      this.userList = [];
      this.$api.msgApi
        .groupUserList({
          group_id: this.contact_id,
        })
        .then((res) => {
          this.user = res.data;
          if (res.code !== 0) return;
          // 判断自己是否为群主
          const admin = res.data.filter((item) => item.role == 1 && item.userInfo.id == this.userInfo.user_id);
          if (admin.length) this.isAdmin = true;
          // 判断自己是否是群管理
          const manage = res.data.filter((item) => item.role == 2 && item.userInfo.id == this.userInfo.user_id);
          if (manage.length) this.manage = true;
          // 判断是否有管理权限
          if (admin.length || manage.length) this.isAuth = true;
          this.$forceUpdate();
          this.allUser = JSON.parse(JSON.stringify(res.data));
          if (res.data.length > 18) {
            if (this.isAuth) {
              this.userList = res.data.splice(0, 18);
            } else if (this.contact.setting.invite) {
              this.userList = res.data.splice(0, 19);
            } else {
              this.userList = res.data.splice(0, 20);
            }
          } else {
            this.userList = res.data;
          }
          this.pageLoading = false;
        });
    },
    // 打开联系人详情
    openChatDetail(item) {
      if (this.userInfo.user_id == item.id) return;
      uni.navigateTo({
        url: `/pages/contacts/detail?id=${item.id || this.query.id}&source=group&group_id=${this.contact_id}`,
      });
      // let friend = msgStore.getContact(item.id);
      // if (this.contact.role < 3 || this.contact.setting.profile == '1' || friend) {
      //   uni.navigateTo({
      //     url: `/pages/contacts/detail?id=${item.id}&source=group&group_id=${this.contact_id}`
      //   });
      // } else {
      //   uni.showToast({
      //     title: '已开启用户隐私！',
      //     icon: 'none'
      //   });
      //   return false;
      // }
    },
  },
};
</script>

<style lang="scss" scoped>
.cu-list {
  padding-bottom: 0;
}
.mt {
  margin-top: 16rpx;
}
.user-list {
  padding: 0 20rpx 20rpx;
  .user-info {
    width: calc(var(--amplified_base) * 142rpx);
    height: calc(var(--amplified_base) * 130rpx);
    text-align: center;
    .user-avatar {
      width: calc(var(--amplified_base) * 100rpx);
      height: calc(var(--amplified_base) * 100rpx);
      margin: auto;
    }
    .user-name {
      width: calc(var(--amplified_base) * 100rpx);
      margin: 10rpx auto;
      font-size: calc(var(--amplified_base) * 22rpx);
    }
    .user-opt {
      border: 1px dashed #999;
      height: calc(var(--amplified_base) * 98rpx);
      width: calc(var(--amplified_base) * 98rpx);
      display: flex;
      align-items: center;
      justify-content: center;
      .icon {
        color: #999 !important;
      }
    }
  }
}

.delete-btn {
  justify-content: center !important ;
}

.notice-content {
  width: 100%;
  min-height: 480rpx;
  .im-textarea {
    width: 100%;
    min-height: 480rpx;
    padding: 20rpx;
    text-align: left;
  }
}
.manage-content {
  text-align: left;
}
.notice-line {
  width: 70%;
  text-align: right;
}

.cancel-border:after {
  border: none;
}

:deep .select-chat-bg-wrap {
  padding: 20rpx 0;

  .select-chat-bg__title {
    font-size: 36rpx;
    line-height: 3;
    font-weight: bold;
    text-align: center;
  }
}

:deep(.interests-popup-wrap) {
  width: 750rpx;
  height: auto;
  max-height: 50vh;
  overflow: auto;
  padding: 40rpx 20rpx;
  z-index: 9999;

  .title {
    text-align: center;
    font-size: 36rpx;
    font-weight: bold;
  }

  .select-content {
    margin-top: 60rpx;
    display: flex;
    flex-wrap: wrap;

    .label-li {
      padding: 12rpx 24rpx;
      line-height: 1;
      border: 1rpx solid #999;
      border-radius: 8rpx;
      margin: 12rpx 12rpx 0 0;
    }

    .on {
      background-color: #ccc;
      color: #fff;
      border-color: #ccc;
      // border-color: var(--subject_color);
    }
  }

  .add-label {
    margin-top: 20rpx;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    .add-item {
      width: 6em;
      padding: 12rpx 0;
      text-align: center;
      line-height: 1;
      border: 1rpx solid var(--subject_color);
      border-radius: 8rpx;
      margin: 6rpx 12rpx 6rpx 0;
      background-color: var(--subject_color);
      color: #fff;

      .uni-input-placeholder {
        color: rgba(255, 255, 255, 0.7) !important;
      }
    }
  }

  .add-wrap {
    margin-top: 20rpx;
    display: flex;
    align-items: center;

    .add-fh {
      margin-right: 14rpx;
      width: 48rpx;
      height: 48rpx;
      display: flex;
      line-height: 1;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background-color: #eaeaea;
      color: #909090;
    }
  }

  .btn-wrap {
    display: flex;
    margin-top: 100rpx;
    justify-content: space-around;

    .btn-ca {
      line-height: 1;
      padding: 20rpx 60rpx;
      border-radius: 12rpx;
    }

    .btn-cancel {
      background-color: #ddd;
    }

    .btn-affirm {
      background-color: var(--subject_color);
      color: #fff;
    }
  }
}

.label-wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  padding: 0 24rpx;

  .label {
    margin-right: 12px;
  }
}
</style>
